<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>Home</title>
</h:head>
<!-- on load it checks for notification about the weather condition -->
<h:body
	onload="#{scheduleView.checkForNotifications()};#{scheduleView.showNumberOfNotifications()};">

	<h:form id="form">
		<p:growl id="msgs" showDetail="true" />

		<p:notificationBar id="not1" styleClass="top" effect="slide"
			autodisplay="true" widgetVar="nv">
			<p:commandButton value="hide" onclick="PF('nv').hide()"
				icon="ui-icon-arrow-1-n" />
			<p:commandButton value="Create a new Event"
				action="eventCreationPage" immediate="true" />
			<p:commandButton value="see Notifications" action="notificationPage"
				immediate="true" />
			<p:commandButton value="Search other Users"
				oncomplete="PF('searchDialog').show();" immediate="true" />
			<p:commandButton value="Logout" action="#{loginBean.disconnect()}"
				immediate="true" />
			<p:commandButton value="#{userBean.username}"
				oncomplete="PF('userDetailsDialog').show();" immediate="true" />
		</p:notificationBar>

		<p:toolbar>
			<f:facet name="left">
				<p:commandButton value="Create an Outdoor Event"
					action="eventCreationPage" immediate="true" />
				<p:commandButton value="Create an Indoor Event"
					action="indoorEventCreationPage" immediate="true" />
				<p:commandButton value="see Notifications" action="notificationPage"
					immediate="true" />
				<p:commandButton value="Search other Users"
					oncomplete="PF('searchDialog').show();" immediate="true" />
			</f:facet>
			<f:facet name="right">
				<p:menuButton value="#{userBean.username}">
					<p:menuitem value="My details"
						oncomplete="PF('userDetailsDialog').show();" immediate="true" />
					<p:menuitem value="Logout" action="#{loginBean.disconnect()}"
						immediate="true" />
				</p:menuButton>
			</f:facet>
		</p:toolbar>

		<!-- scheduler of the user -->
		<h:panelGrid columnClasses="value">
			<h3 style="margin-top: 0">#{userBean.username}'s Calendar</h3>
			<p:separator />
			<p:schedule id="schedule" value="#{scheduleView.lazyEventModel}"
				widgetVar="myschedule" timeZone="GMT+1" timeFormat="HH:mm-{HH:mm}"
				tooltip="true" draggable="false" resizable="false">
				<p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" />

			</p:schedule>
		</h:panelGrid>


		<!-- dialog that shows the users -->
		<p:dialog widgetVar="searchDialog" header="Users" showEffect="clip"
			hideEffect="clip" width="400">
			<p:dataTable id="users" var="user"
				value="#{searchUsersCheckboxView.users}" selectionMode="single"
				selection="#{searchUsersCheckboxView.selectedUser}"
				rowKey="#{user.id}">
				<p:ajax event="rowSelect"
					listener="#{searchUsersCheckboxView.onRowSelect}" />
				<f:facet name="header">
            		Select a user:
        		</f:facet>
				<p:column headerText="username">
					<h:outputText value="#{user.username}" />
				</p:column>
				<p:column headerText="email">
					<h:outputText value="#{user.email}" />
				</p:column>
			</p:dataTable>
		</p:dialog>

		<!-- shows the details of the user -->
		<p:dialog widgetVar="userDetailsDialog" id="userDetailsDialog"
			header="User Details" showEffect="clip" hideEffect="clip" width="400">
			<h:panelGrid columns="2" id="userDetailsGrid">
				<h:outputLabel value="firstname:" />
				<h:outputText value="#{userBean.firstname}" />

				<h:outputLabel value="lastname:" />
				<h:outputText value="#{userBean.lastname}" />

				<h:outputLabel value="username:" />
				<h:outputText value="#{userBean.username}" />

				<h:outputLabel value="email:" />
				<h:outputText value="#{userBean.email}" />

				<h:outputLabel value="calendar visibility:" />
				<p:selectOneMenu id="calVisibility" style="width:125px"
					value="#{userBean.visibility}">
					<p:ajax event="valueChange"
						listener="#{scheduleView.onVisibilityChange}" update="msgs"
						oncomplete="PF('userDetailsDialog').hide();" />
					<f:selectItem itemLabel="Public" itemValue="1" />
					<f:selectItem itemLabel="Private" itemValue="0" />
				</p:selectOneMenu>
			</h:panelGrid>
		</p:dialog>
		<style type="text/css">
.value {
	width: 1000px;
}
</style>
	</h:form>
</h:body>
</html>